<template>
    <div class = "option-time">
      <div> △ </div>
      <div>
        <span :class = "index === 0 ? 'selected':''"> {{hour}}</span>
        <span> : </span>
        <span :class = "index === 1 ? 'selected':''"> {{min}}</span>
        <span> : </span>
        <span :class = "index === 2 ? 'selected':''"> {{sec}}</span>
      </div>
      <div> ▽ </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        index: 0
      }
    },
    computed: {
      hour: function () {
        let arr = this.optionVal.split(':')
        return arr[0]
      },
      min: function () {
        let arr = this.optionVal.split(':')
        return arr[1]
      },
      sec: function () {
        let arr = this.optionVal.split(':')
        return arr[2]
      }
    },
    props: {
      optionObj: {
        type: Object,
        require: true
      },
      optionVal: {
        type: String,
        twoWay: true,
        require: true
      },
      isShowOption: {
        type: Boolean,
        twoWay: true,
        require: true
      }
    },
    ready () {
      this.up = function () {
        let arr = this.optionVal.split(':')

        let tmp = arr[this.index]
        tmp = parseInt(tmp)
        tmp++

        if (this.index === 0) {
          if (tmp > 23) {
            tmp = 0
          }
        } else if (tmp > 59) {
          tmp = 0
        }
        if (tmp < 10) {
          tmp = '0' + tmp.toString()
        }
        arr[this.index] = tmp
        this.optionVal = arr.join(':')
      }

      this.Down = function () {
        let arr = this.optionVal.split(':')

        let tmp = arr[this.index]
        tmp = parseInt(tmp)
        tmp--

        if (tmp < 0) {
          tmp = 0
        }
        if (tmp < 10) {
          tmp = '0' + tmp.toString()
        }
        arr[this.index] = tmp
        this.optionVal = arr.join(':')
      }

      this.right = function () {
        this.index++
        if (this.index > 2) {
          this.isShowOption = false
          this.index = 0
        }
      }

      this.left = function () {
        this.index--
        if (this.index < 0) {
          this.index = 0
        }
      }
    }
  }
</script>

<style lang = "less">
  .option-time {
    border: 3px solid grey;
    width: 150px;
    position: relative;
    left: 90px;
  }
</style>
